<template>
  <el-card shadow="hover" class="msg-cont">
    <template #header>
      <div class="flex justify-between">
        <el-button type="danger" plain :disabled="data?.live_status == 2"
          >结束直播</el-button
        >
        <el-button type="primary" plain v-if="data?.live_status == 1"
          >上传商品图片</el-button
        >
      </div>
    </template>
    <div v-loading="iframeLoading">
     <iframe
        v-show="showIframe"
        id="huoduan_frame"
        frameborder="0"
        scrolling="auto"
        name="main"
        :src="data?.iframe_url"
        class="htype"
        :class="{ htype4: live_type == 4 }"
        style="visibility: inherit; width: 100%; z-index: 1; overflow: visible"
        @load="iframeLoaded"
      >
      </iframe>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
import { ref, onMounted, inject,watch ,computed,toRefs} from "vue";
import { useCommonStore } from "@/store/common";
const useCommon = useCommonStore();
const props = defineProps({
   data:{
    type:Object,
    default:{}
  }
});
useCommon.showIframe=true;
const showIframe = computed(() => useCommon.showIframe);
const live_id = inject('liveId');
const live_type = inject('liveType');


console.log(live_id)
console.log(live_type)
console.log(useCommon.showIframe)
const iframeLoading = ref(true);
const iframeLoaded = () => {
  iframeLoading.value = false;
  console.log("iframe加载完成");
};

// watch(props.data, (n, o): void => {
  
//    porps.data=n;

   
// }, { deep: true}); 

</script>
<style>
.msg-cont {
  .el-card__body {
    padding: 0;
  }
  .el-card__header {
    padding: 15px;
  }
}
</style>
<style scoped lang="scss">
.htype {
  height: 430px;
}
.htype4 {
  height: 500px;
}
</style>
